<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center class="dia" width="856px" :before-close="close">
        <div class="el-dialog-div">
            <div class="info">
                <el-form :model="lineForm" :rules="lineFormRules" ref="lineForm" class="info-form"
                    label-position="left">
                    <div class="w403">
                        <el-form-item label="录播标题" label-width="80px" prop="name">
                            <el-input v-model="lineForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="上课时间" label-width="80px" prop="date">
                            <el-date-picker v-model="lineForm.date" type="date" placeholder="选择日期" class="w159"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeDate">
                            </el-date-picker>
                            <el-time-picker is-range v-model="lineForm.timeValue" range-separator="-"
                                start-placeholder="开始" end-placeholder="结束" placeholder="选择时间范围" class="w159"
                                value-format="HH:mm" format="HH:mm">
                            </el-time-picker>
                        </el-form-item>
                        <el-form-item label="内容简介" label-width="80px">
                            <!-- <el-input type="textarea" v-model="lineForm.cont"></el-input> -->
                            <div id="div2" class="edit"></div>
                        </el-form-item>
                        <el-form-item label="上传视频" label-width="80px" prop="displayUrl" ref="url">
                            <div v-show="lineForm.fileName !=``"
                                style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 60px;text-align: left;">
                                {{lineForm.fileName}}
                            </div>
                            <div class="box">
                                <el-upload class="avatar-uploader mr10" :action="uploadfileurlVideo"
                                    :show-file-list="false" accept=".mp4" :on-progress="progressVideo"
                                    :on-success="successVideo" :before-upload="beforeUploadVideo">
                                    <div class=" box box-tb box-pack-start">
                                        <el-button style="width: 70px;" class="mb20">上传</el-button>
                                    </div>
                                </el-upload>
                                <el-button @click="showVideo(lineForm.displayUrl)" v-if="lineForm.displayUrl !=null">查看
                                </el-button>
                            </div>
                            <el-progress v-if="showProgress" :percentage="progInt"></el-progress>
                        </el-form-item>
                        <el-form-item label="打卡证书" label-width="80px" prop="certId">
                            <el-select v-model="lineForm.certId" v-if="certlist.length !=0">
                                <el-option :value='cert.id' :label="cert.name" v-for="cert in certlist" :key="cert.id">
                                </el-option>
                            </el-select>
                            <el-col v-else>
                                <el-col>还没有打卡证书请添加证书</el-col>
                                <el-button type="primary" @click="$router.push('/zsgl')">添加证书</el-button>
                            </el-col>

                        </el-form-item>
                    </div>

                    <div class="img-up">
                        <el-form-item label="" label-width="0" id="up-img-div" class="up-img-div zb" prop="title">
                            <el-upload class="avatar-uploader" :action="uploadfileurl" :show-file-list="false"
                                accept=".jpg,.jpeg,.png,.bmp,.JPG,.JPEG," :on-progress="progress" :on-success="success"
                                :before-upload="beforeUpload">
                                <img v-if="lineForm.cousUrl" :src="lineForm.cousUrl" class="avatar">
                                <span class="posa-icon">本地上传</span>
                            </el-upload>
                        </el-form-item>
                        <div class="slt">
                            <img :src="item.url" alt="" class="img" v-for="(item,i) in images" :key="i"
                                :class="{checked:item.url == lineForm.img}" @click="change(item.url)">
                        </div>
                        <span class="psa-img">课程封面</span>
                    </div>
                </el-form>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="insertCous">确 定</el-button>
            <el-button @click="close">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import mixinDevice from '@/utils/live.js'
    import E from 'wangeditor';
    export default {
        mixins: [mixinDevice],
        props: {
            title: {
                default: '创建录播'
            },
            dialogFormVisible: {
                default: false
            },
            editData: {}
        },
        data() {
            return {
                editdata: this.editData,
                progInt: 0, // 动态显示进度条
                showProgress: false,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                uploadfileurlVideo: this.$url.baseURL + '/upload/uploadfile',
                user: this.$store.state.loginInfo.user,
                lineForm: {
                    displayUrl: null,
                    name: '',
                    cousUrl: 'https://yhykt.oss-cn-beijing.aliyuncs.com/9524E6E1F7FD4665ACE117D5BA7F73386.jpg?Expires=4765415777&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=XWRT8RHs2GV4gCfy1SkE0N%2FrYu4%3D',
                    cont: '',
                    date: '',
                    timeValue: ['12:00', '13:00'],
                    domains: [{
                        value: ''
                    }],
                    certId: '',
                    fileName: '',
                    fileid: '',
                    osskey: '',
                    id: null,
                },
                certlist: [],
                lineFormRules: {
                    name: [{
                        required: true,
                        message: '请输入课程名称',
                        trigger: 'blur'
                    }, ],
                    date: [{
                        type: 'string',
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }],
                    certId: [{
                        required: true,
                        message: '请选择打卡证书模板',
                        trigger: 'blur'
                    }],
                    displayUrl: [{
                        required: true,
                        message: '请上传视频',
                        trigger: 'blur'
                    }],
                },
                editor: null
            }
        },
        mounted() {
            //查询打卡证书模板
            this.$ajax.post('/ycert/listbytype', {
                schoolid: this.user.schoolId,
                type: 2
            }).then(res => {
                this.certlist = res.list;
                console.log(this.certlist)
            })
        },
        methods: {
            getData() {
                console.log(this.editData);
                this.lineForm.id = this.editData.id;
                this.lineForm.certId = this.editData.certId;
                this.lineForm.displayUrl = this.editData.displayUrl;
                this.lineForm.name = this.editData.name;
                this.lineForm.cousUrl = this.editData.cousUrl;
                // this.lineForm.date = this.editData.kssj.substr(0, 10);
                // this.lineForm.timeValue = [this.editData.kssj.substr(11, 16), zb.jssj.substr(11, 16)];
                this.$nextTick(res => {
                    this.editor.txt.html(this.editData.introduce);
                })

            },
            setEditor() {
                console.log(222);
                this.$nextTick(res => {
                    this.editor = new E(`#div2`)
                    // 或者 const editor = new E( document.getElementById('div1') )
                    this.editor.config.height = 200
                    this.editor.config.placeholder = '请填写内容'
                    this.editor.config.menus = [
                        'head',
                        'fontSize',
                        'fontName',
                        'lineHeight',
                        'foreColor',
                        'justify',
                        'image',
                    ]
                    this.editor.config.uploadImgShowBase64 = true
                    this.editor.config.showFullScreen = false
                    this.editor.config.zIndex = 5
                    this.editor.config.focus = true
                    this.editor.create()
                })

            },
            resetForm() {
                this.$refs['lineForm'].resetFields();
                this.lineForm.id = null
            },
            destroy() {
                this.editor.destroy()
                this.editor = null
            },
            insertCous() {
                console.log(this.user);

                this.$refs['lineForm'].validate((valid) => {
                    if (valid) {
                        this.lineForm.createUser = this.user.id;
                        this.lineForm.schoolid = this.user.schoolId;
                        var kssj = this.lineForm.date + ' ' + this.lineForm.timeValue[0];
                        var jssj = this.lineForm.date + ' ' + this.lineForm.timeValue[1];
                        this.lineForm.kssj = new Date(kssj).getTime() / 1000;
                        this.lineForm.jssj = new Date(jssj).getTime() / 1000;
                        this.lineForm.introduce = this.editor.txt.html();
                        console.log(this.lineForm);
                        let url
                        if (this.lineForm.id == null) {
                            url = '/wyxyrecordcous/add';
                        } else {
                            url = '/wyxyrecordcous/modify'
                        }
                        this.$ajax.post(url, this.lineForm).then(res => {
                            if (res.code == 0 && res.msg == 0) {
                                this.$message.success("操作成功！")
                                this.close(1);
                            } else {
                                this.$message.error("操作失败！请稍后再试！");
                            }
                            this.$emit('update')
                        });
                    } else {
                        return false;
                    }
                });
            },
            changeDate(e) {
                //console.log(e);
            },
            change(url) {
                this.lineForm.cousUrl = url;
            },

            close(index) {
                this.$emit('closeDia');
                return
                if (index != 1) {
                    this.$confirm('关闭后上传视频将取消,确认关闭？')
                        .then(_ => {
                            this.$emit('closeDia');
                        })
                        .catch(_ => {});
                } else {
                    this.$emit('closeDia');
                }

            },
            progress(event, file, fileList) {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            success(response, file, fileList) {

                this.lineForm.cousUrl = response.body.data.url;
                this.loading.close();
                this.$message.success('文件上传成功！');
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png", "gif", "jpeg"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('图片格式暂不支持！');
                    return false;
                }
            },

            showVideo(url) {
                window.open(url);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        height: 100%;

        .create-btn {
            width: 182px;
            background-color: #4c87ff;
            border-radius: 21px;
        }

        .el-dialog-div {
            display: flex;
            flex-direction: column;
            height: 600px;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info-form {
                    display: flex;
                    // width: 403px;
                    height: 218px;

                    .img-up {
                        margin-left: 50px;
                        display: grid;
                    }
                }

                .upPic {
                    width: 304px;
                    height: 216px;
                    background-color: #f8f9fd;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border: solid 1px #d6dbe8;
                    border-radius: 5px;
                }

                .line-center {
                    display: flex;
                    flex-direction: column;
                    // justify-content: flex-start;
                    align-content: space-between;
                }
            }

            .type {
                padding: 0 0 30px 0;
                width: 100%;
                height: 190px;

                .type-item {
                    display: flex;
                    justify-content: center;

                    // align-items: center;
                    .type-list {
                        margin-right: 20px;
                        width: 229px;
                        height: 158px;
                        background-color: #fefefe;
                        border-radius: 5px;
                        border: solid 1px #d6dbe8;

                        .type-bg {
                            text-align: center;
                            width: 100%;
                            height: 103px;
                        }

                        .type-info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .n1 {
                                font-size: 18px;
                                color: #2e323e;
                            }

                            .n2 {
                                font-size: 12px;
                                color: #888fa0;
                            }
                        }

                        // &:hover {
                        // 	cursor: pointer;
                        // 	border: solid 1px #5b90ff;
                        // }

                        &.checked {
                            border: solid 1px #5b90ff;
                        }
                    }
                }

            }
        }
    }

    .h-auto {
        height: calc(100% - 80px);
    }

    .slt {
        margin: 15px auto 0;
        width: 300px;
        height: 83px;
        box-sizing: border-box;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .up-img-div {
        position: relative;
        width: 300px;
        height: 224px;
    }

    .el-upload {
        position: relative;
    }

    .posa-icon {
        background: rgba(3, 3, 3, .3);
        border-radius: 2px;
        padding: 0 15px 0 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 298px;
        height: 244px;
        display: block;
    }

    .class-list {

        &>>>.el-form-item__content {
            display: flex;
        }
    }

    .add-course>>>.el-dialog {
        height: 100%;
    }

    .psa-img {
        padding-top: 10px;
    }

    .addclassbtn {
        margin: 0 0 5px 235px;
    }

    .delcs {
        margin-left: 10px;
    }

    .dia>>>.el-textarea__inner {
        height: 120px !important;
    }
</style>
